<template>
	 <!-- 微信授权手机号一键登录 -->
	<view class="wechat-auth">
    <!-- 
      当button的 open-type 的值为 'getPhoneNumber' 时为获取用户手机号
      他会$emit一个事件，@getphonenumber
    -->
		<button 
			class="btn-normal" 
			@click="clickPhoneNumber"
			open-type="getPhoneNumber" 
			@getphonenumber="handelMpWeixinMobileLogin($event)"
		>
			<view class="wechat-auth-container">
				<image src="~@/static/channel/wechat.png" class="icon"/>
				<text class="title">微信手机号一键登录</text>
			</view>
		</button>
	</view>
</template>

<script>
	import store from '@/store'
	import { isEmpty } from '@/utils/util'
	
	export default {
		props: {
			// 是否存在第三方用户信息
			isParty: {
				type: Boolean,
				default: false
			},
			// 第三方用户信息数据
			partyData: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				// 微信小程序登录凭证 (code)
				// 提交到后端，用于换取openid
				code: ''
			}
		},
		methods: {
			// 按钮点击事件: 获取微信手机号按钮
      // 实现目的: 在getphonenumber事件触发之前获取微信登录code
      // 因为如果在getphonenumber事件中获取code的话,提交到后端的encryptedData会存在解密不了的情况
			async clickPhoneNumber() {
				this.code = await this.getCode();
			},
			
			// 微信授权获取手机号一键登录
			// getphonenumber事件的回调方法
			async handelMpWeixinMobileLogin({ detail }) {
        console.log(detail);
				const that = this;
				if(detail.errMsg != 'getPhoneNumber:ok') {
					console.log('微信获取手机号失败', detail.errMsg);
          if(detail.errMsg == 'getPhoneNumber:fail no permission') {
            that.$toast('请先进行微信认证')
          }
					return;
				}
        
				store.dispatch('LoginMpWxMobile', {
					code: that.code,
					encryptedData: detail.encryptedData,
					iv: detail.iv,
					isParty: app.isParty,
					partyData: app.partyData,
					refereeId: store.getters.refereeId
				})
				.then(res => {
					// 显示登录成功
					that.$toast(res.message);
					// 跳转回原页面
					setTimeout(() => {
						that.onNavigateBack(1)
					}, 2000)
				})
				.catch(err => {
					const resultData = err.result.data;
					// 显示错误信息
					if(isEmpty(resultData)) {
						that.$toast(err.result.message);
					}
					if(resultData.isBack) {
						setTimeout(() => that.onNavigateBack(1), 2000)
					}
				})
			},
			
			// 获取微信登录的code
			getCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						// 授权登录服务提供商
						provider: 'weixin',
						success(res) {
							resolve(res.code)
						},
						fail() {
							reject()
						}
					})
				})
			},
			// 登录成功，跳转回原页面
			onNavigateBack(delta = 1) {
				
				const pages = getCurrentPages();
				if(pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$navTo('pages/index/index')
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
  // 微信授权登录
  .wechat-auth {
    width: 320rpx;
    margin: 50rpx auto 0 auto;

    .wechat-auth-container {
      display: flex;
      justify-content: center;
    }

    .icon {
      width: 38rpx;
      height: 38rpx;
      margin-right: 15rpx;
    }

    .title {
      font-size: 28rpx;
      color: #666666;
    }
  }
</style>
